<template>
    <el-row style="justify-content: center;align-items:center;height: 5vh;padding-left: 2%;padding-right: 3%">
        <el-col :span="8">
            <el-text style="font-size: 30px">全部库存</el-text>
        </el-col>
        <el-col :span="8" style="text-align: right;padding-right: 2%">
          <el-select v-model="type" clearable placeholder="选择类别" size="large" @change="handleSelect">
            <el-option
                v-for="item in typeList"
                :key="item.goodsType"
                :label="item.goodsType"
                :value="item.goodsType"
            />
          </el-select>
        </el-col>
        <el-col :span="8">
            <el-input
                v-model="searchValue"
                placeholder="输入名称或条码"
                :prefix-icon="Search"
                style="max-width: 20vw"
                size="large"
            />
        </el-col>
    </el-row>
    <div style="margin-top: 2vh" v-loading="isLoading">
        <el-table :data="tableData(search(curGoodsStoreList))"
                  height="74vh"
                  style="width: 100%;"
                  :header-cell-style="{ background: '#f6f6f6',  }"

        >
            <el-table-column label="商品名/条码" width="300">
                <template #default="scope">
                    <el-row>
                        <el-col span="24" style="padding-left: 5%;">
                            <el-row style="max-width: 145px"><el-text>{{ scope.row.goodsName }}</el-text></el-row>
                            <el-row><el-text>{{ scope.row.code }}</el-text></el-row>
                        </el-col>
                    </el-row>
                </template>
            </el-table-column>
            <el-table-column prop="cost" label="成本价" />
            <el-table-column label="库存">
                <template #default="scope">
                    <el-input-number v-model="scope.row.inventory" :min="0" style="width: 40%" @change="updateInventory(scope.row)"/>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button type="primary" link @click="handleAdd(scope.row)">入库</el-button>
                    <el-button type="primary" link @click="handleOut(scope.row)">出库</el-button>
                    <el-button type="primary" link @click="handleWarn(scope.row)">预警</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div style="justify-content: center;align-items:center;height: 60px; background-color: rgba(255,255,255,0.72);boxShadow:1px 0px 1px #a6a6a6;z-index: 999;display: flex;padding: 5px 25px 5px 25px;">
            <div style="flex: 4;" >
                <el-pagination
                    v-model:current-page="currentPage"
                    v-model:page-size="pageSize"
                    :background="true"
                    layout="->,prev, pager, next, jumper"
                    :total="search(curGoodsStoreList).length"
                    @current-change="handleCurrentChange"
                />
            </div>
        </div>
    </div>
  <el-drawer
      v-model="showAdd"
      title="商品入库"
      :direction="'rtl'"
      size="30%"
  >
    <div>
      <div><el-text size="large">{{dataTemp.goodsName}}</el-text></div>
      <div><el-text size="small">{{dataTemp.code}}</el-text></div>
    </div>
    <el-form :model="dataTemp" label-width="120px" style="margin: 15px 15px 15px 15px;">
      <el-form-item label="入库数量" prop="num">
        <el-input-number v-model="dataTemp.num" :min="0" style="width: 40%"/>
      </el-form-item>
      <el-form-item label="入库总价(元)" label-width="140px">
        <el-text>{{(dataTemp.num*dataTemp.cost).toFixed(2)}}</el-text>
      </el-form-item>
    </el-form>
    <div>
      <el-button round size="large" type="warning" style="width: 100px;margin-left: 12%" @click="add">
        确认
      </el-button>
    </div>
  </el-drawer>
  <el-drawer
      v-model="showOut"
      title="商品出库"
      :direction="'rtl'"
      size="30%"
  >
    <div>
      <div><el-text size="large">{{dataTemp.goodsName}}</el-text></div>
      <div><el-text size="small">{{dataTemp.code}}</el-text></div>
    </div>
    <el-form :model="dataTemp" label-width="120px" style="margin: 15px 15px 15px 15px;">
      <el-form-item label="出库数量" prop="num">
        <el-input-number v-model="dataTemp.num" :min="0" :max="dataTemp.inventory" style="width: 40%"/>
      </el-form-item>
      <el-form-item label="出库总价(元)" label-width="140px">
        <el-text>{{(dataTemp.num*dataTemp.cost).toFixed(2)}}</el-text>
      </el-form-item>
    </el-form>
    <div>
      <el-button round size="large" type="warning" style="width: 100px;margin-left: 12%" @click="out">
        确认
      </el-button>
    </div>
  </el-drawer>
  <el-drawer
      v-model="showWarn"
      title="预警库存"
      :direction="'rtl'"
      size="30%"
  >
    <div>
      <div><el-text size="large">{{dataTemp.goodsName}}</el-text></div>
      <div><el-text size="small">{{dataTemp.code}}</el-text></div>
    </div>
    <el-form :model="dataTemp" label-width="120px" style="margin: 15px 15px 15px 15px;">
      <el-form-item label="设置安全库存" prop="warn">
        <el-input-number v-model="dataTemp.warn" :min="0" style="width: 40%"/>
      </el-form-item>
      <el-text size="small">当库存到达安全库存并且预测可售卖天数小于等于3天时将会列入预警库存</el-text>
    </el-form>
    <div>
      <el-button round size="large" type="warning" style="width: 100px;margin-left: 12%" @click="warn">
        确认
      </el-button>
    </div>
  </el-drawer>
</template>

<script setup>

import {Search} from "@element-plus/icons-vue";
import {onMounted, ref} from "vue";
import {store} from "@/store";
import {ElMessage} from "element-plus";
import request from "@/utils/request";
import {debounce} from "lodash-es";

const type = ref('全部商品')
const searchValue=ref("")
let curGoodsStoreList=ref([])
let goodsStoreList=ref([])
const typeList=ref([])
const currentPage = ref(1)
const pageSize = ref(30)
let updateTemp=[]
let showAdd=ref(false)
let showOut=ref(false)
let showWarn=ref(false)
let showPurchase=ref(false)
let dataTemp=ref({})

const warnDom=ref()
const PurchaseDom=ref()
let isLoading=ref(false)
onMounted(()=>{
  isLoading.value=true
    setTimeout(()=>{
        goodsStoreList.value=store.goodsStoreInfoList
        curGoodsStoreList.value=goodsStoreList.value
      isLoading.value=false
      if (curGoodsStoreList.value.length===0){
        isLoading.value=true
        setTimeout(()=>{
          goodsStoreList.value=store.goodsStoreInfoList
          curGoodsStoreList.value=goodsStoreList.value
          isLoading.value=false
        },1100)
      }
    },1100)
  request.get("/goods/get/typeList").then(res=>{
    typeList.value=res.data
    typeList.value.unshift({goodsType:"全部商品"})
  })
})

const search = (list) => {
    return list.filter((p)=>{
        return p.goodsName.indexOf(searchValue.value) !==-1 || p.code.indexOf(searchValue.value) !==-1
    })
}
const tableData = (list) => {
    return list.filter(
        (item, index) =>
            index < currentPage.value * pageSize.value &&
            index >= pageSize.value * (currentPage.value - 1)
    );
};
const handleSelect = (key) => {
  type.value=key
  curGoodsStoreList.value=filList(key,goodsStoreList.value)
}

const filList = (key,list) => {
  if (key==="全部商品")
    key=""
  // 返回过滤后的数组
  return list.filter((p)=>{
    return p.goodsType.indexOf(key) !==-1
  })
}

const updateInventory=(e)=>{
  if(updateTemp.filter((p)=>{
    return p.code.indexOf(e.code) !==-1
  }).length===0)
    updateTemp.push(e)
  else
    updateTemp[updateTemp.indexOf(updateTemp.filter((p)=>{
      return p.code.indexOf(e.code) !==-1
    })[0])]=e
  update(updateTemp)
}
const handleCurrentChange = (e) => {
  currentPage.value = e;
};
const update = debounce((e) => {
  console.log(e)
  request.post('/goods/update/goodsStore',e).then(res=>{
    updateTemp=[]
  })
}, 3000)

const handleAdd = (data) => {
  dataTemp.value=data
  dataTemp.value.num=1
  showAdd.value=true
}
const handleOut = (data) => {
  if (data.inventory===0){
    ElMessage({
      message: '库存不能少于0',
      type: 'warning',
    })
  }else {
    dataTemp.value=data
    dataTemp.value.num=1
    showOut.value=true
  }
}
const handleWarn = (data) => {
  dataTemp.value=data
  showWarn.value=true
}
const warn = () => {
  request.post("/goods/update/goodsStore",[dataTemp.value]).then(res=>{
    showWarn.value=false
    request.get("/goods/get/goodsInfoByCode2/"+store.getLocalCurrentStoreMain().storeId+"/"+dataTemp.value.code).then(res=>{
      store.goodsStoreInfoList[store.goodsStoreInfoList.indexOf(store.goodsStoreInfoList.filter((p)=>{
        return p.code.indexOf(res.data.code) !==-1
      })[0])]=res.data
      goodsStoreList.value=store.goodsStoreInfoList
      store.warnInventory=goodsStoreList.value.filter((p)=>{
        return p.state===1
      })
    })
  })
}
const out = () => {
  if (dataTemp.value.num===0){
    ElMessage({
      message: '出库数量不能为0',
      type: 'warning',
    })
  }else {
    request.post("/goods/update/outGoodsNum",[dataTemp.value]).then(res=>{
      showOut.value=false
      request.get("/goods/get/goodsInfoByCode2/"+store.getLocalCurrentStoreMain().storeId+"/"+dataTemp.value.code).then(res=>{
        store.goodsStoreInfoList[store.goodsStoreInfoList.indexOf(store.goodsStoreInfoList.filter((p)=>{
          return p.code.indexOf(res.data.code) !==-1
        })[0])]=res.data
        goodsStoreList.value=store.goodsStoreInfoList
        store.warnInventory=goodsStoreList.value.filter((p)=>{
          return p.state===1
        })
      })
    })
  }

}
const add = () => {
  if (dataTemp.value.num===0){
    ElMessage({
      message: '入库数量不能为0',
      type: 'warning',
    })
  }else {
    request.post("/goods/update/addGoodsNum",[dataTemp.value]).then(res=>{
      showAdd.value=false
      request.get("/goods/get/goodsInfoByCode2/"+store.getLocalCurrentStoreMain().storeId+"/"+dataTemp.value.code).then(res=>{
        store.goodsStoreInfoList[store.goodsStoreInfoList.indexOf(store.goodsStoreInfoList.filter((p)=>{
          return p.code.indexOf(res.data.code) !==-1
        })[0])]=res.data
        goodsStoreList.value=store.goodsStoreInfoList
        store.warnInventory=goodsStoreList.value.filter((p)=>{
          return p.state===1
        })
      })
    })
  }

}
</script>

<style scoped>

</style>